<template>
	<div class="review-content">
		<!-- 审核确认弹框 -->
		<AuditConfirm ref="auditDialog" :remarkItems="remarkItems" :submit="openSeaMoonDialog" />
		<div class="head">
			<span class="title">{{ $t('funds.fund_audit.detail_title') }}</span>
			<div v-if="type" class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					v-if="hasPermission('407016')"
					type="success"
					:disabled="loading"
					@click="confirm(true)"
				>
					{{
						activeName === '1'
							? $t('funds.fund_audit.audit_success_1')
							: activeName === '2'
							? $t('funds.fund_audit.audit_success_2')
							: $t('funds.fund_audit.audit_success_3')
					}}
				</el-button>
				<el-button
					v-if="hasPermission('407016')"
					type="danger"
					:disabled="loading"
					@click="confirm(false)"
				>
					{{
						activeName === '1'
							? $t('funds.fund_audit.audit_fail_1')
							: activeName === '2'
							? $t('funds.fund_audit.audit_fail_2')
							: $t('funds.fund_audit.audit_fail_3')
					}}
				</el-button>
			</div>
			<div v-else class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.back') }}
				</el-button>
			</div>
		</div>
		<div class="main-content detailBoxStyle">
			<MemberWithdrawal
				:isAudit="true"
				:listdeta="listdeta"
			></MemberWithdrawal>
		</div>
		<!-- 审核通过和拒绝 -->
		<el-dialog
			:title="
				!action
					? $t('funds.fund_audit.audit_reject')
					: $t('funds.fund_audit.audit_pass')
			"
			center
			:visible.sync="visible"
			:before-close="closeFormDialog"
			width="630px"
			class="audit-confirm"
		>
			<el-form
				ref="form"
				:model="form"
				:rules="formRules"
				label-width="auto"
			>
				<!-- !action ? $t('funds.fund_audit.backend_remark') : ' ' -->
				<el-form-item
					:label="$t('funds.fund_audit.backend_remark')"
					prop="remark"
				>
					<el-input
						v-model="form.remark"
						clearable
						type="textarea"
						:maxlength="500"
						show-word-limit
						:autosize="{ minRows: 4, maxRows: 4 }"
						v-input="{ name: 'noEmpty' }"
						style="width: 380px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					v-if="!action"
					:label="$t('funds.fund_audit.client_audit_desc')"
					prop="clientRemark"
				>
					<el-input
						v-model="form.clientRemark"
						clearable
						type="textarea"
						:maxlength="500"
						show-word-limit
						:autosize="{ minRows: 4, maxRows: 4 }"
						v-input="{ name: 'noEmpty' }"
						style="width: 380px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeFormDialog">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="openSeaMoonDialog()">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<GoogleKeyInput
			:isShowdialog="isShowGoogleKey"
			@getGoogleKey="submitGoogleKey($event)"
			@backPrevStep="closeGoogleKey()"
		></GoogleKeyInput>
	</div>
</template>

<script>
import list from '@/mixins/list'
import MemberWithdrawal from '@/components/Funds/MemberWithdrawal'
import AuditConfirm from '@/components/AuditConfirm'

export default {
	components: {
		GoogleKeyInput: () => import('@/components/GoogleKeyInput'),
		MemberWithdrawal,
		AuditConfirm
	},
	mixins: [list],
	props: {
		// 审核 true 仅返回 false
		type: Boolean,
		activeName: {
			type: String,
			default: ''
		},
		rowData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			isShowGoogleKey: false,
			loading: false,
			listdeta: {},
			form: {
				remark: '',
				clientRemark: ''
			},
			visible: false,
			action: false,
			seaMoon: {
				isAudit: false,
				visible: false,
				params: {}
			}
		}
	},
	computed: {
		remarkItems () {
			const obj = {
				remark: {
					label: '后台备注'
				}
			}

			if (!this.action) {
				obj['clientRemark'] ={
					label: '客户端备注'
				}
			}
			
			return obj
		},
		formRules() {
			return {
				remark: [
					{
						required: true,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					},
					{
						min: 2,
						max: 500,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					}
				],
				clientRemark: [
					{
						required: true,
						min: 2,
						message: this.$t('funds.fund_audit.form_rules_tip2'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	created() {
		this.getInfo()
	},
	mounted() {},
	methods: {
		onSeaMoonValidSucceed(data) {
			if (this.seaMoon.isAudit) {
				this.auditOne()
			}
		},
		openSeaMoonDialog(form) {
			this.isShowGoogleKey = true
			this.form = {
				...this.form,
				...form
			}
		},
		closeGoogleKey() {
			this.isShowGoogleKey = false
		},
		submitGoogleKey(googleVerifyCode) {
			this.auditOne(googleVerifyCode)
		},
		// 审核
		auditOne(googleVerifyCode) {
			const params = {
				googleVerifyCode: googleVerifyCode,
				eventId: this.rowData.eventId,
				auditResult: this.action ? 1 : 2,
				auditType: Number(this.activeName),
				auditDesc: this.form.remark,
				createdAt: this.rowData.createdAt,
				clientAuditDesc: this.form.clientRemark,
				orderStatus: this.rowData.orderStatus
			}
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			this.$api
				.memberWithDrawUserupdateWithdraw(params)
				.then((res) => {
					if (res?.code === 200) {
						loading.close()
						this.$message({
							type: 'success',
							message: this.$t('common.action_success')
						})
						this.visible = false
						this.$emit('goBack', true)
					} else {
						loading.close()
						this.$message({
							message: res?.msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					loading.close()
				})
		},
		closeFormDialog() {
			this.visible = false
			this.form.remark = undefined
		},
		confirm(action) {
			this.remark = ''
			this.form.clientRemark = ''
			this.action = action
			if (action)  {
				this.$refs.auditDialog.successOpen()
			} else {
				this.$refs.auditDialog.dangerOpen()
			}
		},
		goBack() {
			this.$emit('goBack')
		},
		// 获取审核详情
		getInfo() {
			const params = {
				eventId: this.rowData.eventId,
				createdAt: this.rowData.createdAt,
				userId: this.rowData.userId
			}
			this.listdeta = {}
			this.loading = true
			this.$api
				.selectOnlinePayMemberWithdrawUser(params)
				.then((res) => {
					const { code, msg, data } = res
					if (code === 200) {
						this.listdeta = data || {}
					} else {
						this.$message({
							message: msg,
							type: 'error'
						})
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.dialogBox ::v-deep .el-dialog__header {
	text-align: left;
	background: #009688;
	padding: 0 0 0 20px;
	line-height: 38px;
	.el-dialog__title {
		color: #ffffff;
	}
	.el-dialog__headerbtn {
		top: 10px;
		i {
			color: #ffffff;
		}
	}
}
.red {
	color: red;
}
.review-content {
	margin: 24px 16px 20px 16px;
	color: #666666;
	.name {
		font-weight: 600;
	}
	.review-table {
		width: 100%;
		text-align: center; /*文本居中*/
		border-collapse: collapse; /*表格的边框合并，如果相邻，则共用一个边框*/
		border-spacing: 0;
		border: 1px solid rgba(235, 238, 245, 0.712);
		td {
			border-right: 1px solid rgba(235, 238, 245, 0.712);
			border-bottom: 1px solid rgba(235, 238, 245, 0.712);
			height: 37px;
			width: 130px;
			font-size: 12px;
			line-height: 21px;
		}
		.td-title {
			background: rgba(239, 239, 239, 0.849);
			max-width: 56px;
		}
	}
	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;
		.title {
			font-weight: 600;
			color: rgb(192, 190, 190);
		}
		.right-btn {
			float: right;
		}
	}
	.main-content {
		.review-content {
			min-height: 150px;
			border-top: 0;
			padding: 30px;
			.name {
				font-weight: 600;
			}
			.review-flex {
				position: relative;
				width: 100%;
				margin-top: 15px;
				display: flex;
				justify-content: space-between;
				div {
					display: inline-block;
					width: 24%;
				}
				.txtfeed {
					width: 160px;
					word-wrap: break-word;
					vertical-align: top;
					overflow: hidden;
				}
			}
		}
		.more-height {
			height: 200px;
		}
	}
}
</style>
